import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { UserCircleO } from '@react-vant/icons';
type Props = {}

function My({ }: Props) {
    const navigate = useNavigate();
    const logins = () => {
        navigate('/login')
    }
    const regs = () => {
        navigate('/reg')
    }
    const Lie = () => {
        navigate('/listsd')
    }
    const token = localStorage.getItem('token')
    console.log(token, '11111111');

    return (
        <div className='box'>
            <div className="tops">
                <div style={{ height: "80px" }}></div>
                {token ? (
                    <div className='toplosd'>
                        <div className='cond'>
                            <p>
                                <span style={{ fontSize: "40px" }}><UserCircleO /></span>
                                <b style={{ float: "right", lineHeight: "43px", fontSize: "18px", marginLeft: "20px" }}>13064826532</b>
                            </p>
                            <p>
                                <span style={{ fontSize: '15px', color: "#fff", float: "left", lineHeight: "43px" }}>切换账号</span>
                                <span style={{ fontSize: '25px', color: "#eee", float: "right", lineHeight: "43px" }}>{'>'}</span>
                            </p>
                        </div>
                    </div>
                ) : (
                    <div className="toplos">
                        <dl>
                            <dt style={{ fontSize: "50px" }}>
                                <UserCircleO />
                            </dt>
                            <dd style={{ margin: "-10px" }}>
                                <span onClick={logins}>登录</span>
                                <b style={{ fontSize: "17px" }}>/</b>
                                <span onClick={regs}>注册</span>
                            </dd>
                        </dl>
                    </div>
                )}
            </div>

            <div className='bottom'>
                <div style={{ height: "20px" }}></div>
                <div className='con1'>
                    <p><svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1893" width="30" height="30"><path d="M833.828571 43.885714a87.771429 87.771429 0 0 1 87.771429 87.771429v760.671086a87.771429 87.771429 0 0 1-87.771429 87.771428H248.685714a87.771429 87.771429 0 0 1-87.771428-87.771428v-146.285715h58.499657l0.014628 117.028572a58.514286 58.514286 0 0 0 55.588572 58.441143L277.942857 921.6h526.628572a58.514286 58.514286 0 0 0 58.441142-55.588571l0.073143-2.925715v-702.171428a58.514286 58.514286 0 0 0-58.514285-58.514286H277.942857a58.514286 58.514286 0 0 0-58.441143 55.6032L219.428571 160.914286l-0.014628 117.013943H160.914286V131.657143a87.771429 87.771429 0 0 1 87.771428-87.771429h585.142857zM248.685714 658.285714a29.257143 29.257143 0 0 1 0 58.514286H131.657143a29.257143 29.257143 0 0 1 0-58.514286h117.028571z m-29.271771-87.786057v58.514286H160.914286v-58.514286h58.499657z m29.257143-87.7568a29.257143 29.257143 0 0 1 0 58.514286H131.657143a29.257143 29.257143 0 0 1 0-58.514286h117.028571z m-29.257143-87.786057v58.514286H160.914286v-58.514286h58.499657z m29.257143-87.7568a29.257143 29.257143 0 0 1 0 58.514286H131.657143a29.257143 29.257143 0 0 1 0-58.514286h117.028571z" fill="#697EFF" p-id="1894"></path><path d="M555.885714 248.685714c78.599314-0.731429 143.184457 62.537143 146.183315 142.218972l0.1024 4.139885a148.918857 148.918857 0 0 1-49.693258 109.7728c70.656 34.889143 120.100571 107.710171 122.733715 192.8192l0.1024 4.637258c-0.043886 3.349943-0.146286 6.670629-0.336457 9.976685a29.257143 29.257143 0 0 1-58.104686 6.729143L716.8 716.8h-0.863086c0.351086-3.3792 0.585143-6.787657 0.731429-10.24l0.131657-4.271543C715.439543 613.522286 645.705143 542.368914 560.040229 541.257143H555.885714c-86.162286-1.170286-157.242514 68.564114-160.797257 156.730514l-0.117028 4.286172c0.087771 4.900571 0.365714 9.728 0.863085 14.511542H394.971429a29.257143 29.257143 0 1 1-58.177829-4.432457l0.131657 2.121143-0.160914-2.633143c-0.087771-1.6384-0.146286-3.2768-0.2048-4.944457L336.457143 702.288457c0.863086-87.113143 50.7904-161.982171 122.733714-197.514971a148.567771 148.567771 0 0 1-49.488457-105.589029L409.6 395.044571c0.804571-81.642057 66.296686-147.163429 146.271086-146.344228H555.885714z m0 58.514286c-46.665143-0.629029-85.226057 36.878629-87.6544 84.494629l-0.117028 3.335314c0.804571 48.0256 38.2976 86.571886 84.538514 87.683657L555.885714 482.742857c46.621257 0.643657 85.152914-36.790857 87.6544-84.362971l0.117029-3.335315c-0.731429-48.069486-38.253714-86.674286-84.523886-87.800685L555.885714 307.2z" fill="#4DEDFD" p-id="1895"></path></svg>
                        <span style={{ float: "right", margin: " 0 0 0 10px" }}>常用联系人</span>  </p><span style={{ fontSize: '30px', color: "#ccc" }}>{'>'}</span>
                </div>
                <div style={{ height: "20px" }}></div>
                <div className='con2' onClick={Lie}>
                    <p><svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2324" width="30" height="30"><path d="M845.630718 1024h-667.261436A105.619872 105.619872 0 0 1 72.872562 918.492084V180.518849A105.619872 105.619872 0 0 1 178.369282 75.010933h667.261436a105.619872 105.619872 0 0 1 105.49672 105.507916V918.492084a105.619872 105.619872 0 0 1-105.49672 105.507916zM178.369282 130.989242a49.585586 49.585586 0 0 0-49.518412 49.529607V918.492084a49.585586 49.585586 0 0 0 49.518412 49.529608h667.261436a49.585586 49.585586 0 0 0 49.518412-49.529608V180.518849A49.585586 49.585586 0 0 0 845.630718 130.989242z" fill="#4070DB" p-id="2325"></path><path d="M268.662293 424.875361h486.675414" fill="#FFFFFF" p-id="2326"></path><path d="M755.337707 452.864515H268.662293a27.989154 27.989154 0 0 1 0-55.978308h486.675414a27.989154 27.989154 0 0 1 0 55.978308z" fill="#4070DB" p-id="2327"></path><path d="M323.879297 604.610513h376.241406" fill="#FFFFFF" p-id="2328"></path><path d="M700.087116 632.599668h-376.174232a27.989154 27.989154 0 0 1 0-55.978309h376.174232a27.989154 27.989154 0 0 1 0 55.978309z" fill="#4070DB" p-id="2329"></path><path d="M268.662293 784.33447h486.675414" fill="#FFFFFF" p-id="2330"></path><path d="M755.337707 812.33482H268.662293a27.989154 27.989154 0 1 1 0-55.978308h486.675414a27.989154 27.989154 0 1 1 0 55.978308z" fill="#4070DB" p-id="2331"></path><path d="M300.872212 0m44.782647 0l0 0q44.782647 0 44.782646 44.782647l0 127.630543q0 44.782647-44.782646 44.782647l0 0q-44.782647 0-44.782647-44.782647l0-127.630543q0-44.782647 44.782647-44.782647Z" fill="#4070DB" p-id="2332"></path><path d="M633.562495 0m44.782646 0l0 0q44.782647 0 44.782647 44.782647l0 127.630543q0 44.782647-44.782647 44.782647l0 0q-44.782647 0-44.782646-44.782647l0-127.630543q0-44.782647 44.782646-44.782647Z" fill="#4070DB" p-id="2333"></path></svg>
                        <span style={{ float: "right", margin: " 0 0 0 10px" }}>我的订单</span>  </p><span style={{ fontSize: '30px', color: "#ccc" }}>{'>'}</span>
                </div>
                <div style={{ height: "20px" }}></div>
                <div className='con3'>
                    <p><svg className="icon" viewBox="0 0 1032 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2180" width="30" height="30"><path d="M224.9168 398.048c39.7488-125.5296 157.3104-216.7488 295.8816-216.7488 138.4704 0 256.032 91.2192 295.8768 216.7488h51.5616c-41.4384-153.1872-181.5024-266.2512-347.5248-266.2512-165.936 0-306 113.064-347.3424 266.2512h51.5472z" fill="#4887ED" p-id="2181"></path><path d="M205.5104 737.2352h-1.3056c-74.6256 0-135.288-60.6576-135.288-135.2832v-77.6256c0-74.6256 60.6624-135.288 135.288-135.288h1.2192c36.3744 0 65.8992 29.5296 65.8992 65.904v216.4704c0 36.288-29.5248 65.8224-65.8128 65.8224z" fill="#639DF6" p-id="2182"></path><path d="M204.2048 441.2672c-45.744 0-82.968 37.2192-82.968 82.968v77.6256c0 45.7488 37.224 82.968 82.968 82.968h1.3056a13.5696 13.5696 0 0 0 13.5024-13.5024V454.8608a13.608 13.608 0 0 0-13.5936-13.5936h-1.2144z" fill="#8EB7FE" p-id="2183"></path><path d="M834.0176 737.2352h-1.3056c-36.288 0-65.8128-29.5248-65.8128-65.8128V454.8608c0-36.3744 29.5248-65.8992 65.8992-65.8992h1.2192c74.6256 0 135.288 60.6576 135.288 135.2832v77.6304c0.0864 74.6112-60.6624 135.36-135.288 135.36z" fill="#639DF6" p-id="2184"></path><path d="M832.7984 441.2672a13.608 13.608 0 0 0-13.5936 13.5936v216.4752a13.5696 13.5696 0 0 0 13.5024 13.5024h1.3056c45.7488 0 82.968-37.2192 82.968-82.9632V524.24c0-45.744-37.2192-82.9632-82.968-82.9632h-1.2192v-0.0096z" fill="#8EB7FE" p-id="2185"></path><path d="M566.0816 877.5776h-4.776c-14.4432-0.1872-25.968-12.1008-25.7808-26.5296a26.1456 26.1456 0 0 1 26.1504-25.7808h0.3744c155.0688 2.256 248.3424-127.8768 249.288-129.1872a26.2512 26.2512 0 0 1 36.4704-6.3696 26.1456 26.1456 0 0 1 6.4704 36.3696c-4.512 6.1872-108.1056 151.4976-288.1968 151.4976z" fill="#4887ED" p-id="2186"></path></svg>
                        <span style={{ float: "right", margin: " 0 0 0 10px" }}>客服中心</span>  </p><span style={{ fontSize: '30px', color: "#ccc" }}>{'>'}</span>
                </div>
            </div>
        </div>
    )
}

export default My